<template>
	<view :class="clientType" class="dramaBoxAll">
		<view class="isMask" @click="isClose"></view>
		<view  class="dramaBox">
			<view class="popup-top-mess">
				<view class="dramaTitle">
					<view class="dramaTitleLeft" style="display: flex;align-items: center;justify-content: flex-start;">
						<view class="clamp">{{ compInfo.title || '???' }}</view>
						<text class="margin-left-xs margin-right-xs">·</text>
						<view style="width: 250rpx;">{{ compInfo.finish ? '已完结共' : '更新至' }}{{ compInfo.updateOfEpisodes || '??' }}集</view></view>
					<view @click="isClose" style="width: 90rpx;height: 90rpx;display: flex;align-items: center;justify-content: flex-end;" class="closeBox">
						<!-- #ifdef MP-KUAISHOU -->
							<image style="width: 18rpx;height: 32rpx;transform: rotate(270deg);" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/back_gary.png"></image>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
							<image style="width: 32rpx;height: 18rpx;transform: rotate(180deg);" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/icon_chooseArrow.png"></image>
						<!-- #endif -->
					</view>
				</view>
				<navTab :navType="6" :initIndex="initIndex" ref="ttBox" style="margin-top: 20rpx;margin-bottom: 20rpx;" v-if="tabTitle && tabTitle.length > 0" :tabTitle="tabTitle" @changeTab="changeTab" :tabIndexChange="tabIndexChange"></navTab>
			</view>
			<swiper vertical="true" duration="300" :style="{ height: 'calc(860rpx - 176rpx)' }" :current="currentTab" @change="swiperTab" >
				<swiper-item v-if="dramaList.length > 0" v-for="(listItem, listIndex) in dramaList" :key="listIndex">
					<view style="height: 100%;overflow-y: scroll;">
						<view class="content">	
							<view class="imgItem" v-for="(cardItem, cardIndex) in listItem" v-if="cardItem && (currentTab == listIndex || currentTab == listIndex + 1 || currentTab == listIndex - 1)" :key="cardIndex" @click="toDetail(cardItem, cardIndex)">
								<view class="imgBox">
									<view class="isSeq">
										第{{cardItem.sequence + 1}}集
									</view>
									<view v-if="cardItem.index == currentIndex" class="isPlayBox">
										<view class="isPlay zwyLive"></view>
										<view class="playName">正在播放</view>
									</view>
									<view v-if="cardItem.needUnLock" class="lockBox">
										<image class="isLock" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_whiteLock.png"></image>
									</view>
									<view v-if="cardItem.index == currentIndex"  class="isImgMask"></view>
									<image class="imgBox" lazy-load :src="cardItem.coverImgUrl"></image>
								</view>	
							</view>	
							<view class="imgItem" v-if="listItem.length % 3 == 2">
								<view class="imgBox"></view>	
							</view>	
						</view>
						<view style="height: 50rpx;"></view>
					</view>
				</swiper-item>
			</swiper>		
			<!-- #ifdef MP-TOUTIAO -->
				<view class="followBox" v-if="!compInfo.subscribe">
					<view @click="isZj" class="followItem">
						<image style="width: 33rpx;height: 29rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/icon_followSmall.png"></image>
						<view style="margin-left: 15rpx;" >更新提醒我</view >
					</view>
				</view>
			<!-- #endif -->
		</view>
	</view>

</template>

<script>
import navTab from '@/components/navTab.vue';
export default {
components:{navTab},
name: 'dramaList',
props: {
	currentIndex: {
		type: Number,
		default: 0
	},
	compInfo: {
		type: Object,
		default: {}
	},
	list: {
		type: Array,
		default: () => {
			return [];
		}
	}
},
data() {
	return {
		clientType:'',
		initIndex:0,
		duration:0,
		dramaList:[],
		currentTab:0,
		tabTitle:[],
		isView:'',
		tabIndexChange: ''
	};
},
methods: {
	isZj(){
		this.$emit('isZj');
	},
	toDetail(item) {
		console.log('item------', item);
		// 从渠道进来 前一个视频 是否解锁，解锁才能继续解锁
		let objBefore = this.list[item.index - 1]
		if(getApp().globalData.batchId && getApp().globalData.seqEpisodeListSwitch) {
			if(objBefore && objBefore.needUnLock) {
				this.$emit('viewAlertBuyBefore', true);
				return 
			}
		}
		this.$emit('changeTab', item.index);//设置swiper的第几页
	},
	handList(){
			let tempList = this.list.map((item,index)=>{
				item['index'] = index;
				return item;
			});
			let tempTitle = []
			let tempDramaList = [];
			let saveIndex = 0;
			  for(let i = 0 ; i< Math.ceil(tempList.length/6) ; i++){
				tempTitle.push({
				  classifyName:`${1+(6 * i)}集-${6*(i+1) > tempList.length ? tempList.length:6*(i+1)}集`
				})
				let nowJ = 6 * i;
				let nextJ = 6 * (i+1);
				let temp = [];
				for(let j = nowJ ; j < nextJ ; j++){
					if(this.list[j]) temp.push(this.list[j]);
					if(j == this.currentIndex) saveIndex = i;
				}
				tempDramaList.push(temp);
			  }
			  this.initIndex = saveIndex;
			  this.tabTitle = JSON.parse(JSON.stringify(tempTitle));
			  this.dramaList = JSON.parse(JSON.stringify(tempDramaList));
			  console.log('tempDramaList',tempDramaList);
	},
	swiperTab: async function(e) {
		var index = e.detail.current; //获取索引
		await this.$nextTick()
		this.tabIndexChange = index
	},
	// touchend(e){
	// 	console.log(this.tabTitle,'initIndex----');
	// 	// if(e.changedTouches[0].pageY>1600){
	// 	// 	if(this.currentTab<=this.tabTitle.length){
	// 	// 		this.currentTab++
	// 	// 	this.changeTab(this.currentTab++)
	// 	// 	}
	// 	// }
	// 	console.log(e,'eeeeeeeeeeeee');
	// },
	changeTab(index) {
		this.currentTab = index;
		console.log('index', index);
	},
	isClose(){
		this.$emit('isClose')
	},
	dramaClick(index){
		this.$emit('changeTab', index);//设置swiper的第几页
	}
},

onLoad() {
	console.log('list', this.list);
},
onReady() {
	//#ifdef MP-TOUTIAO
		this.clientType = 'toutiao';
	//#endif
	//#ifdef MP-KUAISHOU
		this.clientType = 'kuaishou';
	//#endif
	this.handList()
}
};
</script>

<style lang="scss">
@import '@/common/oneClass.css';  

.followBox{
	.followItem{
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		color: #ffffff;
		width: 710rpx;
		height: 88rpx;
		background: #38364B;
		border-radius: 45rpx;
	}
	position: relative;
	margin: 0rpx auto 20rpx auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kuaishou{
	.dramaBox {
		.dramaTitle {
			.dramaTitleLeft{
				font-size: 32rpx;
			}
			display: flex;
			font-weight: bold;
			align-items: center;
			color: #212121;
			font-size: 32rpx;
			padding-left: 44rpx;
			padding-right: 40rpx;
			justify-content: space-between;
		}
		position: absolute;
		z-index: 102;
		bottom: 0;
		color: black;
		overflow: hidden;
		bottom: 0;
		height: 757rpx;
		width: 100vw;
		background-color: white;
		border-radius: 13rpx 13rpx 0rpx 0rpx;
		.imgBox {
			position: relative;
			width: 206rpx;
			border-radius: 13rpx;
			height:256rpx;
			overflow: hidden;
		}
	}
}
.toutiao{
	.dramaBox {
		.dramaTitle {
			.dramaTitleLeft{
				font-size: 30rpx;
			}
			display: flex;
			font-weight: bold;
			align-items: center;
			color: #FFFFFF;
			font-size: 30rpx;
			padding-left: 43rpx;
			padding-right: 40rpx;
			justify-content: space-between;
		}
		position: absolute;
		z-index: 102;
		bottom: 0;
		color: black;
		overflow: hidden;
		bottom: 0;
		transition: .3s;
		width: 100vw;
		background-color: #242331;
		border-radius: 39rpx 39rpx 0rpx 0rpx;
		.imgBox {
			position: relative;
			width: 207rpx;
			border-radius: 13rpx;
			height:299rpx;
			overflow: hidden;
		}
	}
}

.dramaBoxAll {
	position: fixed;
	z-index: 103;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
}


.content {
	.isPlayBox{
		z-index: 12;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.playName{
		font-size: 28rpx;
		color: white;
	}
	.lockBox{
		.isLock{
			width: 26rpx;
			height: 34rpx;
		}
		background: rgba(0, 0, 0, 0.6);
		border-bottom-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: 0;
		z-index: 99;
		top: 0;
	}
	.isSeq{
		background-color: rgba(0,0,0,0.5);
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
		color: white;
		z-index: 11;
		font-size: 28rpx;
	}
	.isImgMask{
		position: absolute;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.5);
	}
	.imgItem{
		margin-top: 23rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	display: flex;
	flex-wrap: wrap;
	width: 100vw;
	padding: 0 5.6%;
	box-sizing: border-box;
	justify-content: space-between;
}

.isCloseTop::before{
	position: absolute;
	left: 0;
	right: 0;
	top: 17rpx;
	margin: auto;
	width: 82rpx;
	content: '';
	height: 10rpx;
	background-color: #D8D8D8;
	border-radius: 5rpx;
}
.isCloseTop{
	height: 49rpx;
	position: relative;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
}
.isMask {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 101;
	width: 100vw;
	height: 100vh;
	// background-color: #00000050;
}
.isChoose {
height: 32rpx;
width: 26rpx;
}
.dramaContent {
flex-wrap: wrap;
padding-left: 32rpx;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding-bottom: env(safe-area-inset-bottom);
}
.dramaItem {
position: relative;
margin-right: 14rpx;
margin-bottom: 14rpx;
color: #FFFFFF;
font-size: 24rpx;
width: 86rpx;
display: flex;
align-items: center;
justify-content: center;
height: 86rpx;
background: #2A2A2A;
border-radius: 8rpx;
}

.label-set {
width: 148rpx;
height: 37rpx;
margin: 4rpx 0 0 24rpx;
}

.color-gold {
color: #ECBFA4;
}

.popup-top-mess {
background: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/popup_top_bg.png') no-repeat center center;
background-size: 100% 100%;
.dramaTitle {
	padding: 0 42rpx;
}
}
</style>
